<!-- eslint-disable vue/no-deprecated-v-on-native-modifier -->
<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <el-header style="z-index: 99; background-color: #222D32; color: #fff; line-height: 60px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; width: 100%;">
      <div>小区管理系统</div>
      <div style="display: flex; align-items: center;">
        <div style="margin-right: 20px;">
          {{ currentDate }} {{ currentWeek }} {{ currentTime }}
        </div>
        <div class="avatar" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 20px; cursor: pointer;">
          <img src="../assets/avatar.png" alt="头像" style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        <el-dropdown>
          <span class="el-dropdown-link">
            admin<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 主容器，包含左侧菜单和右侧内容 -->
    <el-container style="margin-top: 60px;"> <!-- 顶部固定栏高度 60px -->
      <!-- 侧边菜单栏 -->
      <el-aside width="220px" style="background-color: #222D32; height: 100vh; padding-left: 0px; position: fixed; top: 60px; bottom: 0px; overflow-y: auto;">
        <div class="avatar-wrapper" style="text-align: center; padding: 18px 0px;">
          <div class="avatar" style="width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin: 10px auto; cursor: pointer;">
            <img src="../assets/avatar.png" alt="头像" style="width: 100%; height: 100%; object-fit: cover;">
          </div>
          <div class="title">您好！admin，欢迎回来</div>
        </div>
        <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#222D32" text-color="#fff" active-text-color="#2FB9D4">
          <el-menu-item index="1" @click="goToPage('ControlPanel')">
            <i class="el-icon-menu"></i>
            <span>控制台</span>
          </el-menu-item>
          <el-submenu index="2">
            <template #title>
              <i class="el-icon-location"></i>
              <span>小区管理</span>
            </template>
            <el-menu-item index="2-1" @click="goToPage('CommunityList')">小区列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template #title>
              <i class="el-icon-suitcase"></i>
              <span>房产管理</span>
            </template>
            <el-menu-item index="3-1" @click="goToPage('PropertyManagement')">房产管理</el-menu-item>
            <el-menu-item index="3-2" @click="goToPage('BuildingManagement')">栋数管理</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template #title>
              <i class="el-icon-user"></i>
              <span>业主信息管理</span>
            </template>
            <el-menu-item index="4-1" @click="goToPage('PeopleManagement')">人员管理</el-menu-item>
            <el-menu-item index="4-2" @click="goToPage('VehicleManagement')">车辆管理</el-menu-item>
            <el-menu-item index="4-3" @click="goToPage('PetManagement')">宠物管理</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template #title>
              <i class="el-icon-user"></i>
              <span>停车位管理</span>
            </template>
            <el-menu-item index="5-1" @click="goToPage('ParkingSpaceManagement')">车位管理</el-menu-item>
            <el-menu-item index="5-2" @click="goToPage('ParkingSpaceUsage')">车位使用管理</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template #title>
              <i class="el-icon-user"></i>
              <span>系统设置</span>
            </template>
            <el-menu-item index="6-1" @click="goToPage('PersonalSettings')">个人设置</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 内容区域 -->
      <el-container style="margin-left: 220px;"> <!-- 留出侧边栏宽度 -->
        <el-main style="padding: 20px; overflow-y: auto; height: calc(100vh - 60px);"> <!-- 使内容区域可以滚动，避免顶部重叠 -->
          <!-- 通过 router-view 渲染不同的页面内容 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      currentDate: '2025-07-01',
      currentWeek: '星期二',
      currentTime: '11:09:38',
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000);
  },
methods: {
  updateTime() {
    const now = new Date();
    this.currentDate = now.toISOString().split('T')[0];
    this.currentWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
    this.currentTime = now.toTimeString().substr(0, 8);
  },
  goToPage(page) {
    this.$router.push({ name: page });
  },
  handleLogout() {
    console.log('退出按钮点击了！');  // 确保点击事件触发
    this.$confirm('您确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      console.log('用户确定退出');
      // 确定退出后，跳转到登录页面
      this.$router.push({ name: 'Login' });
    }).catch(() => {
      console.log('退出操作被取消');
    });
  }
}


};
</script>

<style scoped>
.title {
  color: #fff;
  font-size: 14px;
}
.el-dropdown-link {
  color: #fff;
  cursor: pointer;
}
.el-menu {
  border-right: 0px;
  margin-bottom: 100px;
}
.el-container {
  height: 100vh;
}
.el-aside {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 400px;
  height: 100vh;
}
.el-main {
  padding: 10px;
  overflow-y: auto;
}
</style>
